<div class="layui-row">
    <div class="layui-col-md8">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">分类</label>
                <div class="layui-input-inline type2">
                    <input type="hidden" value="" class="type_value">
                    <select name="type" class="type fenlei" lay-filter="type">
                        <?php if(!empty($type)){
                            foreach($type as $k=>$v){
                                ?>
                                <?php if($v['id']==$data['join_type']){ ?>
                                    <option value="<?=$v['id']?>" selected><?=$v['name']?></option>
                                <?php }else{ ?>
                                    <option value="<?=$v['id']?>"><?=$v['name']?></option>
                                <?php } ?>
                            <?php }} ?>
                    </select>
                </div>
            </div>
            <div class="layui-form-item type_sub1">
                <label class="layui-form-label" style="width:120px;">话题选择</label>
                <div class="layui-input-inline type_sub2">
                    <select name="type_sub" id="type_sub" class="type_sub huati" lay-filter="type_sub">
                        <?php if(!empty($type_sub)){
                            foreach($type_sub as $kk=>$vv){
                                ?>
                                <?php if($vv['id']==$data['join_type_sub']){ ?>
                                    <option value="<?=$vv['id']?>" selected><?=$vv['sub_title']?></option>
                                <?php }else{ ?>
                                    <option value="<?=$vv['id']?>"><?=$vv['sub_title']?></option>
                                <?php } ?>
                            <?php }} ?>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">请先选择分类</div>
            </div>
            <!--            <div class="layui-form-item">-->
            <!--                <label class="layui-form-label">视频名称</label>-->
            <!--                <div class="layui-input-block">-->
            <!--                    <input type="text" name="title" value="--><?//=$data['title']?><!--" placeholder="请输入视频名称" class="layui-input layui-disabled video_title" style="width: 350px;">-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">添加视频</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-disabled" id="test1" disabled>上传视频</button>
                    <input type="text" name="" class="wenzi1" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url1" value="<?=$data['video_url']?>" class="video_url1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">添加封面</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test2"><i class="layui-icon"></i>上传封面</button>
                    <input type="text" name="" class="wenzi2" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url2" value="<?=$data['pic']?>" class="video_url2">
                </div>
                <br>
                <div style="border:1px solid gainsboro;width: 100px;height: 100px;margin-left: 150px;float: left;">
                    <img src="<?=$data['pic']?>" style="width: 100px;height: 100px;" class="pic">
                </div>
                <span style="margin-left: 10px;color: gainsboro;">建议尺寸187*249</span>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">视频标题</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入视频标题" class="layui-textarea layui-disabled video_desc"><?=$data['video_desc']?></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-col-md4">
        <p>视频预览</p>
        <div style="border: 1px solid gainsboro;width: 90%;height: 300px;">
            <video src="<?=$data['video_url']?>" controls="controls" style="height: 300px;width: 100%;" class="sp"></video>
        </div>
        <!--        <div>-->
        <!--            <br>-->
        <!--            <div class="layui-form-item">-->
        <!--                <label class="layui-form-label">视频剪辑</label>-->
        <!--                <div class="layui-input-block">-->
        <!--                    <ul class="all_icon">-->
        <!--                        <li class="icon0">-->
        <!--                            <input type="text" style="width:30px;height:20px;margin-top:5px;"> &nbsp s - <input type="text" style="width:30px;height:20px;margin-top:5px;">s-->
        <!--                            &nbsp&nbsp<button class="layui-btn layui-btn-primary icon"><span style="height:15px;">+</span></button>-->
        <!--                        </li>-->
        <!--                    </ul>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
</div>
<div style="float: right;">
    <input type="hidden" name="ids" value="<?=$data['join_type_sub']?>" class="ids">
    <input type="hidden" value="<?=$data['id']?>" class="id">
    <input type="hidden" value="<?=$data['duration']?>" class="duration">
    <button class="layui-btn save" style="margin-left: 20px;margin-right: 20px;">保存</button>
    <button class="layui-btn back" style="margin-left: 20px;margin-right: 20px;">取消</button>
</div>
<script>

    //保存
    $('.save').click(function(){
        //获取
        var update_video = [];
        $('.all_icon li').each(function (index, item) {
            var arr = [];
            $(this).find('input').each(function (input_item, input_index) {
                arr.push($(this).val())
            })
            update_video[index]=arr
        })
        var id=$('.id').val();
        var ids=$('.ids').val();
        var fenlei=$('.fenlei').val();
        var huati=$('.huati').val();
        var video_desc=$('.video_desc').val();
        var video_url1=$('.video_url1').val();
        var video_url2=$('.video_url2').val();
        var duration=$('.duration').val();
        $.ajax({
            type: "post",
            data: {id:id,fenlei:fenlei,huati:huati,video_desc:video_desc,video_url1:video_url1,video_url2:video_url2,update_video:update_video,duration:duration},
            dataType: "json",
            url: "<?=base_url("word/words/save_edit_sort")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time:1000},function(){
                        var url="<?=base_url("word/words/edit_word?id=")?>";
                        var jump_url=url+ids;
                        window.location.href=jump_url
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //上传
        layui.use('upload', function(){
            var upload = layui.upload;
            //上传视频
            upload.render({
                elem: '#test1' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "video"}
                ,accept: 'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                ,before:function(){
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up1").text("上传成功");
                            $('.sp').attr("src",res.data.file_url)
                            $('.video_url1').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传封面
            upload.render({
                elem: '#test2' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up2").text("上传成功");
                            $('.pic').attr("src",res.data.file_url)
                            $('.video_url2').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });
        });
        //监听下拉框
        layui.use('form', function(){
            var form = layui.form;
            //监听下拉框选择
            form.on('select(type)', function(data){
                console.log(data.value)
                //获得监听的值
                var type_id=data.value;
                //给下拉框赋值
                $('.type_value').val(type_id);
                //获得下拉框的值
                var type_ids=$('.type_value').val();
                //有参数传递，则是POST方式,这是下拉框局部刷新
                $(".type_sub").load("<?=base_url("material/material/type_sub")?>",{type_id:type_ids},function(res){
                    //把数据json转化下
                    var arr = JSON.parse(res);
                    if(arr.code==0){
                        var arrs = arr.data;
                        $.each(arrs, function (i, n) {
                            $('.type_sub').append("<option value='" + n.id + "'>" + n.sub_title + "</option>");
                        });
                        layui.form.render('select');
                    }else{
                        layer.msg(arr.msg, {time: 2000},function(){
                            $('.type_sub').append("<option value=''></option>");
                        });
                        layui.form.render('select');
                    }
                });
            });
        });
    })

    //取消
    $(".back").click(function(){
        history.go(-1)
    })

    //图标点击
    $(".icon").click(function() {
        var html="";
        html+="<li>";
        html+="<input type=\"text\" style=\"width:30px;height:20px;margin-top:5px;\"> &nbsp s - <input type=\"text\" style=\"width:30px;height:20px;margin-top:5px;\">s";
        html+="&nbsp&nbsp<button class=\"layui-btn layui-btn-primary layui-btn-xs jian_icon\">-</button>";
        html+="</li>";
        $('ul li:last-child').after(html)
    })
    //删除li标签
    $(".all_icon").on("click",".jian_icon",function(){
        $(this).parent().remove()
    })

</script>
